
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="../avalon.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            avalon.ready(function() {

                avalon.define("fruit", function(vm) {
                    vm.options = ["苹果", "香蕉", "桃子", "雪梨", "葡萄", "哈蜜瓜", "橙子", "火龙果", "荔技", "黄皮"];
                    vm.selected = "桃子"
                });
                var map = {
                    "中国": ["江南四大才子", "初唐四杰", "战国四君子"],
                    "日本": ["日本武将", "日本城堡", "幕府时代"],
                    "欧美": ["三大骑士团", "三大魔幻小说", "七大奇迹"],
                    "江南四大才子": ["祝枝山", "文征明", "唐伯虎", "周文宾"],
                    "初唐四杰": ["王勃", "杨炯", "卢照邻", "骆宾王"],
                    "战国四君子": ["楚国春申君黄歇", "齐国孟尝君田文", "赵国平原君赵胜", "魏国信陵君魏无忌"],
                    "日本武将": ["织田信长", "德川家康", "丰臣秀吉"],
                    "日本城堡": ["安土城", "熊本城", "大坂城", "姬路城"],
                    "幕府时代": ["镰仓", "室町", "丰臣", "江户"],
                    "三大骑士团": ["圣殿骑士团", "医院骑士团", "条顿骑士团"],
                    "三大魔幻小说": ["冰与火之歌", "时光之轮", "荆刺与白骨之王国"],
                    "七大奇迹": ["埃及胡夫金字塔", "奥林匹亚宙斯巨像", "阿尔忒弥斯月神殿", "摩索拉斯陵墓", "亚历山大港灯塔", "巴比伦空中花园", "罗德岛太阳神巨像"]
                }


                avalon.define("linkage", function(vm) {
                    vm.first = ["中国", "日本", "欧美"]
                    vm.second = map[vm.first[1]].concat()
                    vm.third = map[vm.second[0]].concat()
                    vm.firstSelected = "日本"
                    vm.secondSelected = "日本武将"
                    vm.thirdSelected = "织田信长"

                    vm.$watch("firstSelected", function(a) {
                        vm.second = map[a].concat()
                        vm.secondSelected = vm.second[0]
                    })
                    vm.$watch("secondSelected", function(a) {
                        vm.third = map[a].concat()

                        vm.thirdSelected = vm.third[0]
                    })
                })
                var m = avalon.define("multi", function(vm) {
                    vm.multi = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg"];
                    vm.selected = ["aaa", "bbb", "eee"]
                    vm.selectText = ""
                });
                m.selected.$watch("length", function() {
                    m.selectText = m.selected.join(" ")
                })
                avalon.scan();
            })
        </script>
    </head>
    <body>
        <div ms-controller="fruit">
            <h3>文本域与下拉框的联动</h3>
            <input  ms-duplex="selected" />
            <select ms-duplex="selected" >
                <option ms-repeat-option="options" ms-value="option" >{{option}}</option>
            </select>
        </div>

        <div ms-controller="linkage">
            <h3>下拉框三级联动</h3>
            <select ms-duplex="firstSelected" >
                <option  ms-repeat="first" ms-value="el" >{{el}}</option>
            </select>
            <select ms-duplex="secondSelected" >
                <option ms-repeat="second" ms-value="el" >{{el}}</option>
            </select>
            <select ms-duplex="thirdSelected" >
                <option ms-repeat="third" ms-value="el" >{{el}}</option>
            </select>
        </div>

        <div ms-controller="multi">
            <h3>按住SHIFT实现多选</h3>
            <select ms-duplex="selected" multiple="multiple">
                <option ms-repeat="multi"  ms-value="el" >{{el}}</option>
            </select>
            <p>{{selectText}}</p>
        </div>
    </body>
</html>
